import { JsonAsset, Label, Node, ProgressBar, Sprite, SpriteFrame, _decorator, find, sp } from "cc";
import { ecs } from "../../../../../extensions/oops-plugin-framework/assets/libs/ecs/ECS";
import { CCVMParentComp } from "../../../../../extensions/oops-plugin-framework/assets/module/common/CCVMParentComp";
import { Role } from "../Role";
import { RoleModelComp } from "../model/RoleModelComp";
import { oops } from "../../../../../extensions/oops-plugin-framework/assets/core/Oops";
import { UiHelp } from "db://oops-framework/core/utils/UiHelp";
import { RoleViewAnimator } from "./RoleViewAnimator";
import { RoleAttributeType } from "../model/RoleEnum";
const { ccclass, property } = _decorator;

/** 角色显示组件 */
@ccclass('RoleViewComp')
@ecs.register('RoleView', false)
export class RoleViewComp extends CCVMParentComp {
    /** 脚本控制的界面 MVVM 框架绑定数据 */
    data: any = {};
    /** 角色动画 */
    spine: sp.Skeleton = null!;
    effect: sp.Skeleton = null!;
    animator: RoleViewAnimator = null!;
    /** 绿色血条 */
    @property(SpriteFrame)
    greenBar: SpriteFrame = null!;
    /** 红色血条 */
    @property(SpriteFrame)
    redBar: SpriteFrame = null!;

    onLoad() {
        var role = this.ent as Role;
        this.data = role.RoleModel.vm;
        this.data["hasPower"] = role.RoleModel.table.hasPower;
        this.spine = find("content/spine", this.node)!.getComponent(sp.Skeleton)!;
        if (role.RoleModel.myTeam) {
            find("content/hp/Bar", this.node)!.getComponent(Sprite)!.spriteFrame = this.greenBar;
        } else {
            find("content/hp/Bar", this.node)!.getComponent(Sprite)!.spriteFrame = this.redBar;
        }
        this.loadSkeletonData();

        super.onLoad();
    }
    protected start(): void {
        var role = this.ent as Role;
        if (role.RoleModel.table.type == 6) {
            this.get("hp")!.active = false;
            this.get("power")!.active = false;
        }
        if (role.RoleModel.table.type == 3) {
            this.get("lab_name")!.active = false;
        } else {
            this.get("lab_name")!.active = true;
            UiHelp.SetLabel(this.get("lab_name")!, role.RoleModel.table.name);
            this.get("lab_name")!.getComponent(Label)!.color = role.RoleModel.nameColor;
        }
    }
    setHpBar() {
        var role = this.ent as Role;
        var shield = role.getNumericValue(RoleAttributeType.shield);
        var hpBar: ProgressBar = find("content/hp", this.node)!.getComponent(ProgressBar)!;
        var shieldBar: ProgressBar = find("content/hp/bar_shield", this.node)!.getComponent(ProgressBar)!;

        var curHp = role.getNumericValue(RoleAttributeType.hp_battle);
        var maxHp = role.hp + shield;
        var curShield = curHp + shield;

        hpBar.progress = curHp / maxHp;
        shieldBar.progress = curShield / role.hp;
    }
    private loadSkeletonData() {
        var rm = this.ent.get(RoleModelComp);
        var path = rm.spinePath;
        oops.res.load(path, sp.SkeletonData, (err: Error | null, sd: sp.SkeletonData) => {
            if (err) {
                console.error(`动画名为【${path}】的角色资源不存在`);
                return;
            }
            if (!this.spine) {
                return;
            }

            this.spine.skeletonData = sd;
            this.spine.skeletonData.addRef();

            // 加载动画控制器
            this.animator = this.spine.addComponent(RoleViewAnimator)!;
            this.animator.AssetRawUrl = oops.res.get(`game/role/animator/role`, JsonAsset)!;
            this.animator.PlayOnStart = true;
            this.animator.AutoUpdate = true;
            this.animator.role = this.ent as Role;
        });
    }
   
    loadEffectData(path: string) {
        oops.res.load(path, sp.SkeletonData, (err: Error | null, sd: sp.SkeletonData) => {
            if (err) {
                console.error(`动画名为【${path}】的角色资源不存在`);
                return;
            }

            if (!this.effect) {
                return;
            }

            this.effect.skeletonData = sd;
            this.effect.skeletonData.addRef();

            this.effect.setAnimation(0, "animation", false);
        });
    }

    reset(): void {
        this.spine?.skeletonData?.decRef();
        this.effect?.skeletonData?.decRef();
        this.node.destroy();
    }

}